<template>
	<block v-if="isLogin">
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部({{cartCount}})</text>
				<text>降价({{lowPriceCount}})</text>
				<text>常卖({{ishotCount}})</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox-group  @change="changeAll" >
					<checkbox  color="#FF6040"   :checked="allChecked"  />
				</checkbox-group>
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>
		
		<view class="container" >	
			<view class="top">
				<scroll-view 
					class="scroll-view_H" 
					scroll-x="true" 
					scroll-left="0" 
					v-for="(item,index) in cartList"
					:key="index"
				>
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild" >
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group  @change="checkItem(item.id)">
									<checkbox
										color="#FF6040" 
										:checked="item.checked"
										value="1"
									/>
								</checkbox-group>
								
								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="baseUrl + item.img" mode="widthFix"></image>
							</view>
		
							<!-- 信息 -->
							<view class="cartInfo_info" @click="goDetail(item.goodsid)">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥{{item.depreciate}}</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
									</text> <text>￥{{item.market_price}}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="subtract(item.id,item.num)" >－</label>
									<label >{{item.num}}</label>
									<label @click="add(item.id)" >＋</label>
								</view>
							</view>
						</view>
		
					</view>
					<view @click="del(item.id)" class="cartDel" id="demo2">
						<label for="">删除</label>
					</view>
				</scroll-view>
			</view>
			
			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group  @change="changeAll" >
						<checkbox  color="#FF6040"    :checked="allChecked" />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{allPrice.price}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥{{allPrice.delta}}</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" >
					<!-- 被选中的商品的个数 -->
					<label @click="goOrder">去结算({{cartCount}}件)</label>
				</view>
			</view>
		
		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
	</block>
	<view v-else>
		此页面需要登录后查看  
		<navigator url="../login/login">
			去登录
		</navigator>
		
	</view>
	
</template>

<script>

	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	import {mapState} from 'vuex'
	export default {
		components:{cartnull},
		data() {
			return {
				cartList:[],//初始化购物车数据
				buffer: true, //检测购物车是否有数据
				baseUrl:this.$baseUrl,
				allChecked:true,
				isLogin:false,
			}
		},
		computed:{
			allPrice(){
				let sum1 = 0;
				let sum2 = 0;
				this.cartList.forEach(item => {
					if(item.checked){
						sum1 += item.price * item.num
						sum2 += item.market_price * item.num
					}
				})
				return {price:sum1,delta:sum2-sum1}
			},
			cartCount(){
				return this.cartList.filter(item => {
					return item.checked
				}).length
			},
			
			totalCount(){
				return this.cartList.length
			},
			lowPriceCount(){
				return this.cartList.filter(item => {
					return item.price < item.market_price
				}).length
			},
			ishotCount(){
				return this.cartList.filter(item => {
					return item.ishot == 1
				}).length
			},
			
			
			
			
			
			
			...mapState([
				'userInfo'
			])
		},
		onLoad(option) {
			// this.cartCount = option.count;
			console.log(option.count);
			
		},
		// 页面显示时
		onShow() {
			this.getCartList()
		},
		methods:{
			goDetail(id){
				uni.navigateTo({
					url:'../../packagePageA/pages/gooddesc/gooddesc?id=' + id
				})
			},
			goOrder(){
				// 1.至少选中一个商品
				if(this.cartCount>0){
					// 2. 页面传参--缓存 
					let cartList = this.cartList.filter(item => {
						return item.checked
					})
					console.log(cartList);
					
					// 
					let cartInfo = {
						cartList,
						countmoney:this.allPrice,
						countnumber:this.cartCount
					}
					
					uni.setStorageSync('cartInfo',cartInfo)
					
					uni.navigateTo({
						url:'../order/order'
					})
					
				}else{
					uni.showToast({
						title:'至少选中一个商品',
						icon:'none'
					})
				}
				
				
				
			},
			changeAll(){
				console.log(this.allChecked);
				this.allChecked = !this.allChecked
				this.cartList.forEach(item => {
					item.checked = this.allChecked
				})
			},
			checkItem(id){
				console.log('哈哈');
				this.cartList.forEach(item => {
					if(item.id == id){
						item.checked = !item.checked	
					}
				})
				this.allChecked = this.cartList.every(item => {
					return item.checked
				})
				
			},
			async add(id){
				console.log(id);
				let {token} = this.userInfo;
				let res = await this.$http({
					url:'cartedit',
					method:'post',
					header:{
						"content-type":"application/json",
						// token为空时 后台会判断缺少参数
						"authorization":token || null
					},
					data:{
						id,
						type:2
					}
				})
				console.log(res);
				if(res.data.code === 200){
					this.getCartList()
				}else{
					
					// 登录失败
					// uni.showToast({
						
					// })
				}
			},
			async subtract(id,num){
				let {token} = this.userInfo;
				console.log(id,num);
				if(num <= 1){
					return;
				};
				let res = await this.$http({
					url:'cartedit',
					method:'post',
					header:{
						"content-type":"application/json",
						"authorization":token
					},
					data:{
						id,
						type:1
					}
				})
				console.log(res);
				this.getCartList()
			},
			async del(id){
				let {token} = this.userInfo;
				let res = await this.$http({
					url:'cartdelete',
					method:'post',
					header:{
						"content-type":"application/json",
						"authorization":token
					},
					data:{
						id,
					}
				})
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				})
				this.getCartList()
			},
			async getCartList(){
				let {uid,token} = uni.getStorageSync('userInfo');
				let res = await this.$http({
					url:'cartlist',
					header:{
						"content-type":"application/json",
						"authorization":token
					},
					data:{
						uid
					}
				})
				console.log('购物车列表',res);
				if(res.data.code === 200){
					// code码为200时表示 登录有效  更新登录状态
					this.isLogin = true
					
					if(res.data.list){
						// 有数据  隐藏空白页
						this.buffer = true;
						
						res.data.list.forEach(item => {
							item.depreciate = item.market_price - item.price,
							item.checked = true;
						})
						this.cartList = res.data.list
					}else{
						// 没有数据 显示空白页
						this.buffer = false;
					}
				}else{
					// 登录失败  更新登录状态
					this.isLogin = false
				}
				
				
			}
		}
}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
